<template>
  <el-aside :width="isCollapse?'70px':'200px'">
    <el-row class="tac">
      <el-col>
        <!--<h3>菜单</h3>-->
        <el-menu :unique-opened="true"
                 :router="true"
                 :collapse="isCollapse"
                 :default-active="activeIndex"
                 :collapse-transition="false"
                 class="el-menu-vertical-demo"
                 style="min-height: calc(100vh - 60px)">
          <el-menu-item @click="toggleCollapse">
            <i :class="isCollapse?'el-icon-caret-right':'el-icon-caret-left'"></i>
            <span slot="title">{{this.isCollapse?'扩大面板':'缩小面板'}}</span>
          </el-menu-item>
          <el-menu-item :index="user.identity==='管理员'?'/':'/index'">
            <i class="el-icon-menu"></i>
            <span slot="title">我的首页</span>
          </el-menu-item>
          <el-menu-item index="/myTimetable" v-if="user.identity==='学生'">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">我的课表</span>
          </el-menu-item>
          <el-menu-item index="/myCourse" v-if="user.identity==='学生'">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">我的课程</span>
          </el-menu-item>
          <el-menu-item index="/myResult" v-if="user.identity==='学生'">
            <i class="el-icon-s-order"></i>
            <span slot="title">考试成绩</span>
          </el-menu-item>
          <el-menu-item index="/myLesson" v-if="user.identity==='教师'">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">我的授课</span>
          </el-menu-item>
          <el-menu-item index="/resultInput" v-if="user.identity==='教师'">
            <i class="el-icon-s-claim"></i>
            <span slot="title">成绩录入</span>
          </el-menu-item>
          <el-submenu index="1" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>学生管理</span>
            </template>
            <el-menu-item index="/student">历史学生列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>教师管理</span>
            </template>
            <el-menu-item index="/teacher">辅导教师列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span>课程管理</span>
            </template>
            <el-menu-item index="/course">课程列表</el-menu-item>
            <el-menu-item index="/category">课程分类</el-menu-item>
          </el-submenu>
          <!--<el-submenu index="4" v-if="user.identity==='管理员'">-->
          <!--  <template slot="title">-->
          <!--    <i class="el-icon-message-solid"></i>-->
          <!--    <span>选课管理</span>-->
          <!--  </template>-->
          <!--  <el-menu-item index="/select">选课列表</el-menu-item>-->
          <!--</el-submenu>-->
          <el-submenu index="5" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>班级管理</span>
            </template>
            <el-menu-item index="/class">班级列表</el-menu-item>
          </el-submenu>
          <el-submenu index="6" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>专业管理</span>
            </template>
            <el-menu-item index="/major">专业列表</el-menu-item>
          </el-submenu>
          <el-submenu index="7" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>学院管理</span>
            </template>
            <el-menu-item index="/department">学院列表</el-menu-item>
          </el-submenu>
          <el-submenu index="8" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>管理员管理</span>
            </template>
            <el-menu-item index="/administrator">管理员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="9" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>教室管理</span>
            </template>
            <el-menu-item index="/classroom">教室列表</el-menu-item>
            <el-menu-item index="/building">建筑列表</el-menu-item>
          </el-submenu>
          <el-submenu index="10" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-star-on"></i>
              <span>课表管理</span>
            </template>
            <el-menu-item index="/timetable">课表列表</el-menu-item>
          </el-submenu>
          <el-submenu index="11" v-if="user.identity==='管理员'">
            <template slot="title">
              <i class="el-icon-warning"></i>
              <span>公告管理</span>
            </template>
            <el-menu-item index="/notify">公告列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Aside",
  data () {
    return {
      // 根据当前路由设置默认值     根据需求使用path或者name
      activeIndex: this.$route.path,
      user: JSON.parse(sessionStorage.getItem("user")),
      isCollapse:false,
    }
  },
  methods:{
    toggleCollapse(){
      this.isCollapse = !this.isCollapse;
    },
  }
}
</script>

<style lang="less" scoped>

</style>
